<template>
  <div class="crud">
     <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addBtnHandle">操作按钮</el-button>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="#"
                width="180">
            </el-table-column>
            <el-table-column
                prop="username"
                label="姓名">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small" @click="showModifyDialog(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="30%">
        <div>
            <el-input placeholder="请输入内容" v-model="edit.username">
                <template slot="prepend">姓名</template>
            </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="commitModify">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { PostInfo } from '@/bean/PostInfo';
import { url } from 'inspector';
import { Emploee } from '@/typings/Entity.d';

@Component({
  components: {},
  data(){
    return {
      
    };
  },
 
})
export default class CRUD extends Vue {
    tableData:Array<Object>=[]
    dialogVisible:Boolean=false
    edit:Emploee={
        id:0,
        username:''
    }

    showModifyDialog(row:Emploee):void{
        this.edit.id=row.id
        this.edit.username=row.username
        this.dialogVisible=true
    }
    commitModify():void{
        this.$put({url:'emp',data:this.edit,successCallback:(data:Boolean)=>{
            console.log(data)
      this.init();
        }});
        this.dialogVisible = false
    }
    addBtnHandle():void{
        this.$prompt('请输入员工姓名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
             let info:PostInfo<Emploee> = new PostInfo('emp',{ username:value},(data:Object)=>{
                console.log(data)
            });
            this.$post(info);
          this.$message({
            type: 'success',
            message: '已请求新增: ' + value
          });
        }).catch((e) => {
            console.error(e)
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    }
   deleteItem(row:Emploee){
       this.$deleteReq({url:'emp/'+row.id,data:{},successCallback:(_data:Emploee)=>{
        console.log(_data)
      this.init();
        }
       });
   }
   init(){
      let info:PostInfo<Object> = new PostInfo('emps',{},(data:Array<Object>)=>{
          this.tableData = data
      });
      this.$get(info);
   }
     mounted(){
      this.init();
   }
   handleClick(row:Emploee){
       this.$get({url:'emp/'+row.id,data:{},successCallback:(_data:Emploee)=>{
        console.log(_data)
        }
       });
   }
}
</script>
